<template>
	<!-- <movable-area class=" videoCon_move_con " v-show="isShowVideo">
		<movable-view class="videoCon_move" :x="movableX" :y="movableY" direction="all" >
			<view class="videoCon">
				<view class="sportCamera" > -->
					<!-- <image class="img_con" :src="'data:image/jpg;base64,'  + imageSrc" mode="widthFix"></image>
					<uni-icons @click="close_video" class="close_video" type="closeempty" size="30"></uni-icons> -->
			<!-- 	</view>
			</view>
		</movable-view>
	</movable-area> -->
</template>

<script lang="ts" setup>
	import { ref,reactive,onMounted } from "vue";
	let movableX = ref("1vw")
	let movableY = ref("16vh")
	//父组件传来的数据 
	const props = defineProps(["isConnect"])
	
	// 定义emit 传数据给父组件 
	const emits = defineEmits(['sportsResult'])
	
	//ws url地址
	let url = "ws://192.168.100.100:16002?cameraId=1&force=1"
	
	//ws传来的图片 src  覆盖至view层
	let imageSrc:any = ref('')
	let connectSocket = ()=>{
		uni.connectSocket({
			url: url,
			success:(res:any)=>{
				console.log('我是Socket调用成功的回调=====>>>>',res);
			},
			fail: (error:any) => {
				console.log('我是Socket调用失败的回调=====>>>>',error);
			}
		});
		uni.onSocketOpen(function (res) {
		  console.log('WebSocket连接已打开！',res);
		});
		uni.onSocketMessage(function (message:any) {
			let jsonData = JSON.parse(message.data)
			if( jsonData["ui-msg"] == "相机启动成功" ){
				message.value =  jsonData["ui-msg"]
				console.log('相机启动成功===>>>', message.value);
			}else if(jsonData["sport-data"]){
				emits('sportsResult', message.data)
				console.log("我是回调信息=====>>>>",message.data);
			}else{
				imageSrc.value = jsonData['image-data']
				// console.log("我是回调信息=====>>>>",message);
			}
		}); 
		uni.onSocketError(function (res) {
		  console.log('WebSocket连接打开失败，请检查！',res);
		});
	}
	//生命周期内 打开ws 
	// onMounted(()=>{
	// 	connectSocket()
	// })
	//获取学生信息
	let getStudentquery = ()=>{
		uni.request({
			url:"http://192.168.100.100:7001/AiSports/Student/Query",
			 data: {
			},
			method:"POST",
			success: (res:any) => {
				console.log('获取学生信息',res);
			}
		})
	}
	
	//人脸识别 相关
	let faceResult:any = ref('')
	let startFace = ()=>{
		uni.request({
			url:"http://192.168.100.100:7002/startFace",
			 data: {
			    cameraId: "a123456"
			},
			method:"POST",
			success: (res:any) => {
				console.log('人脸检测结果',res);
				faceResult.value = res.data.result
			}
		})
	}
	let isShowVideo = ref(true)
	const close_video = ()=>{
		isShowVideo.value = false
	}
	if(props.isConnect){
		console.log('我开启连接了');
		connectSocket()
	}
</script>

<style>
	.videoCon_move_con{
		 height: 100vh;
		 width: 100vw;
		 top: 0;
		 position: fixed;
		z-index: 100000000000000000000;
	}
	.videoCon_move{
		width: 60vw;
		position: absolute;
		right: 1%;
		top: 15vh;
	}
	 
	.videoCon{
		width: 60vw;
	}
.sportCamera{
	font-size: 1.5rem;
	text-align: center;
	width: 60vw;
	/* height: 100vh; */
	position: relative;
}
.img_con{
	width: 60vw;
}
.close_video{
	position: absolute;
	top: 2vh  ;
	right: 1vw ;
	font-size: 3rem !important;
}

</style>